$(function() {
    var currentPage = 1; //当前页
    var pageSize = 5;

    //记录当前操作用户状态
    var currentId = null;
    var isDelete = null;

    //1. 获取用户数据 动态渲染 
    function render() {
        $.ajax({
            type: 'get',
            url: '/user/queryUser',
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function(info) {
                console.log(info);
                //渲染
                $('tbody').html(template('tmp', info));
                //生成分页
                setPage(info.total);
            }
        });
    }
    //获取第一屏数据渲染完成
    render();


    //2. 分页功能
    function setPage(total) {
        $("#pagintor").bootstrapPaginator({
            bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
            currentPage: currentPage, //当前页
            totalPages: Math.ceil(total / pageSize), //总页数
            size: "small", //设置控件的大小，mini, small, normal,large
            onPageClicked: function(event, originalEvent, type, page) {
                //为按钮绑定点击事件 page:当前点击的按钮值
                console.log(page);
                //立即记录当前页
                currentPage = page;
                //渲染对应页面
                render();
            }
        });
    }

    //3. 点击禁用启用按钮 获取当前数据id 记录要进行的操作(根据按钮颜色)
    $('tbody').on('click', '.button', function() {
        currentId = $(this).parent().attr('data-id');
        isDelete = $(this).hasClass('btn-success') ? 1 : 0; //1为启用 0为禁用
        console.log(currentId);
        console.log(isDelete);
    });

    //4. 点击按钮后 向后台发送请求执行对应操作
    $('.btn-ok').click(function() {
        $.ajax({
            type: 'post',
            url: '/user/updateUser',
            data: {
                id: currentId,
                isDelete: isDelete
            },
            dataType: 'json',
            success: function(info) {
                console.log(info);
                if (info.success) {
                    //重新渲染当前页
                    render();
                    //隐藏模态框
                    $('#modal-user').modal('hide');
                }
            }
        });
    });
});